{layout name="layout" /}

<style>
  .comment-respond {
  background: white;
  box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
  padding: 1.5em 4.6875375%;
}

.guestbook {
  width: 100%; 
  float: left;
  padding-bottom: 3em;
}

.guestbook h2 span {
  font-size: 12px;
}

@media only screen and (max-width: 767px) {
  .comment-respond {
    background: white;
    box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
    padding: 1.5em 7.50006%;
  }
}

h3 {
  font-size: 1.125em;
  /* 18px / 16px */
  line-height: 1.333;
  /* 24px */
}
.comment-respond p{
  margin: 1.125em 0;
}

.comment-respond p.comment-notes {
  margin: 1.5em 0;
}

.comment-respond label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.875em;
  line-height: 1.715;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):not([type="image"]), textarea {
  width: 100%;
  font-family: "Roboto", "Open Sans", sans-serif;
  font-weight: 400;
  padding: 10px 12px;
  max-width: 27.75em;
  min-height: 26px;
  background: #F7F7F7;
  color: #333333;
  border: solid 1px #D4D4D4;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

textarea {
  max-width: 41.625em;
  overflow: auto;
}
.comment-respond p.form-submit {
  margin-top: 2.25em;
}

input[type="submit"]{
  font-size: 0.75em;
  line-height: 1.5;
}

input[type="submit"] {
  font-family: "Roboto", "Open Sans", sans-serif;
  font-weight: 400;
  padding: 10px 12px;
  color: #333333;
  border: solid 1px #333333;
  background: none;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.pager{
  margin-left: 10%;
  width: 60%;
  background: red;
}

ul.pager li:first-child {
  float: left;
}
ul.pager li:last-child{
  float: left;
  margin-left: 30%;
}
</style>

<div class="box">
  <div class="newsview">
    <h2>留言</h2>
    <div class="news_infos">
      <p>有什么想告诉我说的, 就在这吧ヾ(✿ﾟ▽ﾟ)ノ</p>
    </div>
  </div>
  <!-- #respond -->
  <div id="respond" class="comment-respond">
    <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3>
    <form action="{:url('blog/index/saveguestbook')}" method="post" id="commentform" class="comment-form" novalidate="">
      <p class="comment-notes"><span id="email-notes">我会妥善保存你的邮箱哒(｀・ω・´).</span> 必填项已标记<span class="required">*</span></p>
      <p class="comment-form-comment">
        <label for="comment">Comment</label>
        <textarea required="" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
      </p>
      <p class="comment-form-author">
        <label for="author">Name*</label>
        <input id="author" name="author" type="text" placeholder="Jane Doe" value="" size="26">
      </p>
      <p class="comment-form-email">
        <label for="email">Email*</label>
        <input id="email" name="email" type="email" placeholder="name@email.com" value="" size="26">
      </p>
      <p class="comment-form-url">
        <label for="url">Website</label>
        <input id="url" name="url" type="url" placeholder="http://google.com" value="" size="26">
      </p>
      <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment">
        <!-- <input type="hidden" name="comment_post_ID" value="23" id="comment_post_ID">
        <input type="hidden" name="comment_parent" id="comment_parent" value="0"> -->
      </p>
    </form>
  </div><!-- #respond end-->
  <div class="blank"></div>
  <div class="guestbook">
    {foreach $data as $val}
    <div class="bloglist">
      <div>
        <h2>{$val.author} <span>{$val.time|date="Y/m/d", ###}</span></h2>
      </div>
      <p>{$val.comment}</p>
    </div>
    {/foreach}
    {php}$counts = count($data);{/php}
    {lt name="counts" value="15"}
    <p style="text-align: center;">全都给你了, 没有更多啦(╥╯^╰╥).</p>
    {/lt}
    <div class="pagelist">
      {$data->render()}
    </div>
  </div>
</div>
